<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抢妹子大战</title>
</head>
<style>
.div-a {
	float: left;
	width: 400px ;
	border: 1px solid #FFF;
}

.div-b {
	float: left;
	margin-left:2%;
	width: 40%;
	border: 1px solid #FFF;
}
</style>
<body>
	<h4>抢妹子大战</h4>
	手速越快,妹子抢的越多,身体更加庞大
	<br> 按键盘上下左右(↑ ← →)操作自己的头(红色方块的左上角)去撞妹子的头(绿色方块的左上角);右边可以修改昵称;群聊等
	<br>
	<br>
	<!-- Time-->
	<script type="text/javascript">
		function getNowFormatDate() {
			var date = new Date();
			var seperator1 = "-";
			var seperator2 = ":";
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = "[" + date.getFullYear() + seperator1 + month
					+ seperator1 + strDate + " " + date.getHours() + seperator2
					+ date.getMinutes() + seperator2 + date.getSeconds() + "."
					+ date.getMilliseconds() + "]";
			return currentdate;
		}
		function log(msg) {
			var ta = document.getElementById('responseText');
			ta.value = ta.value + '\n' + getNowFormatDate() + msg;
			ta.scrollTop = ta.scrollHeight;
		}
	</script>

	<!-- Game Data-->
	<script type="text/javascript" charset="UTF-8">
		var nodes = new Array();
		var frameIndex = 0;
		var x = 0;
		var y = 0;
		var food = new Object();
	</script>

	<!-- NetWork-->
	<script type="text/javascript">
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://"+window.location.host +"/ws");
			socket.onmessage = function(event) {
				//				var ta = document.getElementById('responseText');
				//				ta.value = ta.value + '\n' + event.data	
				if (event.data.startsWith("{") && event.data.endsWith("}")) {
					var data = JSON.parse(event.data);
					frameIndex = data.frameIndex;
					nodes = data.nodes;
					food = data.food;
				} else {
					log(event.data);
				}
			};
			socket.onopen = function(event) {
				
				var ta = document.getElementById('responseText');
				ta.value = "connect success !";
				socket.send("#0#");//login
			};
			socket.onclose = function(event) {
				var ta = document.getElementById('responseText');
				ta.value = ta.value + "disconnect";
			};
		} else {
			alert("Not Support the WebSocket！");
		}

		function send(message) {
			if (!window.WebSocket) {
				return;
			}
			if (socket.readyState == WebSocket.OPEN) {
				//log(message);
				socket.send(message);
			} else {
				alert("not connect.");
			}
		}
		function chat(message) {
			send("#1#" + message);
		}
		function updateName(name) {
			send("#2#" + name);
		}
		function updateAvatar(url) {
			var image = document.getElementById("source");
			image.src = url;
		}
	</script>

<div style="display:none;">
  <img id="source" src=http://www.xiaohuazu.com/uploads/allimg/140703/1KK51594-0.gif
       width="435" height="235">
</div>


<div class="div-a">
	<canvas id="gameView" width="400px" height="300px"
		style="border: 1px solid #f00;">
		Your browser does not support the canvas element.
		</canvas>
</div>
<div class="div-b">
	<form onsubmit="return false;">
		<textarea id="responseText" style="width: 200px; height: 100px;"
			disabled="disabled" readonly="readonly"></textarea>
		<br> <input type="text" name="message" style="width: 180px"
			value="讲真,一点毛病都没"> <input type="button" value="发送"
			onclick="chat(this.form.message.value)"> <input type="button"
			onclick="javascript:document.getElementById('responseText').value=''"
			value="clear"> <br> <br>
		<input type="text" name="nickname" style="width: 50px" value="玉面小飞龙">
		<input type="button" value="修改昵称"
			onclick="updateName(this.form.nickname.value)">
		<br>
		<input type="text" name="avatar"  value="https://mdn.mozillademos.org/files/5397/rhino.jpg">
		<input type="button" value="修改头像"
			onclick="updateAvatar(this.form.avatar.value)">
	</form>
</div>


<!-- GameRender-->
<script type="text/javascript"  charset="UTF-8">
	var c = document.getElementById("gameView");
	var cxt = c.getContext("2d");
	var image = document.getElementById("source");
	var update = function() {
		cxt.clearRect(0, 0, 9999, 9999);

		cxt.fillStyle = "#440000";
		cxt.fillText(frameIndex, 450, 20);
		for (var i = 0, len = nodes.length; i < len; i++) {
			var node = nodes[i];
			cxt.fillStyle = "#FF3300";
			cxt.fillRect(node.x, node.y, 20 + node.foodSize * 20,
					20 + node.foodSize * 20);
			cxt.drawImage(image,node.x, node.y, 20 + node.foodSize * 20,
					20 + node.foodSize * 20);
			cxt.fillStyle = "#000000";
			cxt
					.fillText((node.level + node.name + "(" + node.x + ","
							+ node.y + ")"), node.x + 20, node.y + 20);
		}
		cxt.fillStyle = "#33FF33";
		cxt.fillRect(food.x, food.y, 20, 20);
		cxt.fillText(("奶茶妹子" + "(" + food.x + "," + food.y + ")"), food.x + 20,
				food.y + 20);
	};
	setInterval(update, 16);
</script>

<!-- GameController-->
<script type="text/javascript"  charset="UTF-8">
	document.onkeydown = function(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];

		var keycodeLog = "==Down== " + e.keyIdentifier + "[" + e.keyCode + "]";
		//			log(keycodeLog);

		var postion = new Object();
		var ischanged = false;
		if (e.keyCode == 37) { // left
			postion.left = 1;
			ischanged = true;
		} else if (e.keyCode == 39) { // right
			postion.right = 1;
			ischanged = true;
		} else if (e.keyCode == 40) { // down
			postion.down = 1;
			ischanged = true;
		} else if (e.keyCode == 38) { // up
			postion.up = 1;
			ischanged = true;
		} 
		if (ischanged) {
			send(JSON.stringify(postion));
		}
		return true;
	};
	document.onkeyup = function(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		var keycodeLog = "== UP == " + e.keyIdentifier + "[" + e.keyCode + "]";
		//			log(keycodeLog);
		var postion = new Object();
		var ischanged = false;
		if (e.keyCode == 37) { // left
			postion.left = 0;
			ischanged = true;
		} else if (e.keyCode == 39) { // right
			postion.right = 0;
			ischanged = true;
		} else if (e.keyCode == 40) { // down
			postion.down = 0;
			ischanged = true;
		} else if (e.keyCode == 38) { // up
			postion.up = 0;
			ischanged = true;
		} 
		if (ischanged) {
			send(JSON.stringify(postion));
		}
		return true;

	};
</script>
</body>
</html>